
import React from 'react'
import Svg from './Svg'

class Canvas extends React.Component {

  constructor () {
    super ()
    this.deselect = this.deselect.bind(this)
  }

  deselect (e) {
    e.stopPropagation()
    this.props.selectPoint(-1)
  }

  render () {
    let props = this.props
    let styles = {
      // container: {
      //   position: 'relative',
      //   height: 'calc(100vh - 48px)',
      // },
      // viewport: {
      //   position: 'absolute',
      //   top: 0,
      //   right: 0,
      //   bottom: 48,
      //   left: 0,
      //   overflow: 'auto',
      //   WebkitOverflowScrolling: 'touch',
      // },
      // table: {
      //   display: 'table',
      //   width: '100%',
      //   height: '100%',
      // },
      // cell: {
      //   position: 'relative',
      //   display: 'table-cell',
      //   verticalAlign: 'middle'
      // },
    }

    return (
      <div style={styles.container}
        onClick={this.deselect}>
        <div style={styles.viewport}>
          <div style={styles.table}>
            <div style={styles.cell}>
              <Svg {...props} />
            </div>
          </div>
        </div>
      </div>
    )
  }

}

export default Canvas

